<template>
    <view class="container">
        <!-- Personal Info Section -->
        <view class="profile-section">
            <u-avatar :src="userInfo.icon" size="80"></u-avatar>
            <view class="user-info">
                <text class="nickname">{{ userInfo.nickName?userInfo.nickName:userInfo.userName }}</text>
                <text class="user-details">身份: {{ userInfo.job }}</text>
                <text class="user-details">手机号: {{ userInfo.phone }}</text>
            </view>
        </view>

        <!-- Function List -->
        <u-cell-group>
            <u-cell title="修改密码" is-link @click="goToPage('/pages/my/resetPassword')" />
            <u-cell title="个人资料" is-link @click="goToPage('/pages/my/edit')" />
            <u-cell title="设置" is-link @click="goToPage('/pages/my/settings')" />
        </u-cell-group>

        <!-- Logout Button -->
        <view class="logout-section">
            <u-button type="error" @click="logout">退出登录</u-button>
        </view>
        <tabBar></tabBar>
    </view>
</template>

<script>
    import {
        jobName
    } from '@/utils/tabBar.js';
    import {
        User
    } from '@/utils'
    import {
        authApi
    } from '../../api';
    export default {
        data() {
            return {
                userInfo: {
                    nickName: '',
                    job: '',
                    phone: '',
                    icon: ''
                }
            };
        },
        onShow() {
            const identify = uni.getStorageSync('identify');
            this.userInfo.job = jobName[identify]['cn'];
        },
        methods: {
            goToPage(url) {
                uni.navigateTo({
                    url
                });
            },
            logout() {
                // Logout logic here
                try {
                    authApi.logout(this.userInfo.phone);
                }finally{
                    
                }
                this.$store.dispatch("logoutByUser");
                uni.showToast({
                    title: '已退出登录',
                    icon: 'success'
                });
                // Redirect to login page
                uni.reLaunch({
                    url: '/pages/public/login'
                });
            },
            async fechUserInfo(userId) {
                const {
                    code,
                    data
                } = await authApi.getUserInfoById(userId);
                if (code == 200) {
                    User.set(data);
                }
            },
        },
        mounted() {
            this.userInfo = User.get();
            // console.log(this.userInfo);
            const identify = uni.getStorageSync('identify');
            this.userInfo.job = jobName[identify]['cn'];
            this.fechUserInfo(User.get().userId);
        }
    };
</script>

<style lang="scss">
    .container {
        padding: 20px;
        background-color: #fff;
    }

    /* Profile Section */
    .profile-section {
        display: flex;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 20px;
    }


    .user-info {
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .nickname {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .user-details {
        color: #666;
        margin-top: 2px;
    }

    /* Logout Section */
    .logout-section {
        margin-top: 30px;
        text-align: center;
    }

    u-button {
        width: 80%;
    }
</style>